<template>
  <div class="hand_phone_detail_container detail" v-if="detail">

    <div style="margin-bottom: 20px; display: flex">
      <el-button
        type="primary"
        @click="
          printPhone
        "
        :disabled="isDisabled"
        :loading="isLoading"
        >打印</el-button
      >
      <el-button type="danger" @click="deleteDeviceById(id,idArr)">删除</el-button>
    </div>
     <el-row>
      <el-col :span="6">键
         <el-badge :value="count" v-if="count>1"></el-badge>
      </el-col>
      <el-col :span="6"> 值 </el-col>

    </el-row>

    <el-form ref="form" label-width="80px" label-position="left">
      <el-form-item label="ID">
        {{detail.testDevicePhone.id}}
      </el-form-item>
      <el-form-item label="SN">
        {{detail.testDevicePhone.sn}}

      </el-form-item>
      <el-form-item label="PO">
        <el-select
          v-model="detail.testDevicePhone.poId"
          placeholder="请选择PO"
          @change="updatePhone({ id, poId: detail.testDevicePhone.poId })"
        >
          <el-option
            v-for="item in pos"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        {{detail.deviceTypeName}}

      </el-form-item>

      <el-form-item label="品牌">
        <div
          style="display: flex; height: 30px; justify-content: space-between"
        >
          <div>{{ detail.model.brand }}</div>
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="brandAndModelDialogVisible = true"
            ></el-button>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="型号">
        <div
          style="display: flex; height: 30px; justify-content: space-between"
        >
          <div>{{ detail.model.model }}</div>
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="brandAndModelDialogVisible = true"
            ></el-button>
          </div>
        </div>
      </el-form-item>
       <el-form-item label="容量">
        {{detail.testDevicePhone.diskCapacity}}
      </el-form-item>
      <!-- disposition -->
        <el-form-item label="销毁方式">
        {{detail.testDevicePhone.disposition}}
      </el-form-item>
      <el-form-item label="监管型号">
        {{detail.testDevicePhone.regulatoryModel}}
      </el-form-item>

      <el-form-item label="销售型号">
        {{detail.testDevicePhone.saleModel}}

      </el-form-item>

      <el-form-item label="是否有锁">
        <el-radio-group
          v-model="detail.testDevicePhone.isAssociated"
          @change="
            updatePhone({
              id,
              isAssociated: detail.testDevicePhone.isAssociated,
            })
          "
        >
          <el-radio :label="true">有锁</el-radio>
          <el-radio :label="false">无锁</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="品质">
        <el-radio-group
          v-model="detail.testDevicePhone.quality"
          @change="updatePhone({ id, quality: detail.testDevicePhone.quality })"
        >
          <el-radio
            :label="item.label"
            v-for="item in qualities"
            :key="item.text"
            >{{ item.text }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态">
            <el-radio-group v-model="detail.testDevicePhone.passed" @change="updatePhone({ id, passed: detail.testDevicePhone.passed})">
              <el-radio
                :label="item.label"
                v-for="item in passeds"
                :key="item.text"
                >{{ item.text }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
      <el-form-item label="成色">
        <el-radio-group
          v-model="detail.testDevicePhone.deviceCondition"
          @change="
            updatePhone({
              id,
              deviceCondition: detail.testDevicePhone.deviceCondition,
            })
          "
        >
          <el-radio
            :label="item.label"
            v-for="item in deviceConditions"
            :key="item.text"
            >{{ item.text }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

       <el-form-item label="年份">
        {{detail.model.year}}
      </el-form-item>
      <el-form-item label="检测员">
        {{detail.userName}}

      </el-form-item>

      <el-form-item label="备注">
        <div
          style="display: flex; height: 30px; justify-content: space-between"
        >
          <div>{{ detail.testDevicePhone.mark | removeComma }}</div>
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="dialogVisible = true"
            ></el-button>

            <el-button
            type="danger" icon="el-icon-delete" size="mini"
             circle
              @click="updatePhone({id,mark:''})"
            ></el-button>
          </div>
        </div>
      </el-form-item>
      <detail-mark
        :marks="marks"
        @updateMark="completeUpdateMark"
        :dialogVisible.sync="dialogVisible"
      ></detail-mark>
      <brand-and-model
        :typeId="typeId"
        :brands="brands"
        :brand="detail.model.brand"
        :model="detail.model.model"
        :models="models"
        :dialogVisible.sync="brandAndModelDialogVisible"
        @updateBrandAndModel="updatePhone"
      ></brand-and-model>
    </el-form>
  </div>
</template>

<script>
import hand_detail_commonMixIn from '@/mixin/hand_detail_common.js'
import hand_update_commonMixIn from '@/mixin/hand_update_common.js'
import { reqUpdatePhone } from '@/api/check_hand_mobile.js'
import DetailMark from '@/components/detailMark.vue'
import BrandAndModel from '@/components/brandAndModel.vue'
export default {
  name: 'phone-detail',
  props: ['id', 'count', 'idArr'],
  mixins: [hand_detail_commonMixIn, hand_update_commonMixIn],
  components: {
    DetailMark,
    BrandAndModel
  },
  data () {
    return {
      // 修改备注对话框
      dialogVisible: false,
      // 修改品牌型号对话框
      brandAndModelDialogVisible: false,
      typeId: null
    }
  },
  watch: {
    id (val) {
      if (val) {
        this.getDeviceDetail(val)
      }
    }
  },
  methods: {
    printPhone () {
      // 如果读出来就要判断有锁没锁
      if (this.detail.autoRead) {
        // passed  有锁无锁
        if (this.detail.testDevicePhone.passed == null || this.detail.testDevicePhone.isAssociated == null) {
          this.$message.error('请选择状态与是否有锁无锁')
          return
        }
      } else {
        // 手动添加不需要

      }
      this.print(this.detail.testDevicePhone.id, this.detail.testDevicePhone.userId, this.idArr)
    },
    // 完成修改备注
    completeUpdateMark (mark) {
      this.updatePhone({ id: this.id, mark })
    },
    // 修改手机
    async updatePhone (data) {
      const res = await reqUpdatePhone({ ...data, id: this.id })
      if (res.data.code == 0) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.brandAndModelDialogVisible = false
      } else {
        this.$message.error(res.data.msg)
      }
      this.getDeviceDetail(this.id)
    },
    async init () {
      await this.getPos()
      await this.getDevices()
      await this.getDeviceDetail(this.id)
      const deviceId = this.getIdByDeviceName(this.detail.deviceTypeName)
      this.typeId = deviceId
      await this.getBrands(deviceId)
      await this.getMarks(deviceId)
      await this.getModels(deviceId, this.detail.model.brand)
    }
  },
  computed: {},
  created () {},
  mounted () {
    this.init()
  }
}
</script>

<style  lang='less'>
.hand_phone_detail_container {
    .el-form-item:nth-child(2n+1){
    background-color: #DCDFE6;
    }
     .el-form-item:hover{
         background-color: #67C23A;
    }
}
</style>
